<!--
  Generated template for the NgDirectivePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>ng-directive  test</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>当用户把鼠标悬停在一个元素上时，改变它的背景色。</p>



<!--<p [myHighlight]="color">Highlight me!</p>
<p [myHighlight]="color" defaultColor="violet" highlightColor="black">
   defaultColor  Highlight me too!
</p>


<p [myHighlight]="color"  highlightColor="black">
   defaultColor  Highlight me too!
</p>-->

  <!--<p myHighlight>Highlight me!</p>-->


<!--<p [myHighlight]="color">Highlight me!</p>-->

  <!--<p myHighlight highlightColor="color">Highlighted in yellow</p>-->
<!--<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>-->



<!--example-->

<h3> here is test service</h3>
<h4>Pick a highlight color  check to switch highlightColor</h4>
<div>
  <input type="radio" name="colors" (click)="color='lightgreen'">Green
  <input type="radio" name="colors" (click)="color='yellow'">Yellow
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>

<p [myHighlight]="color">Highlight me!  without defaultColor</p>

<p [myHighlight]="color" defaultColor="violet">
  Highlight me too!    without highlightColor  only defaultColor
</p>

<hr>
<p><i>Mouse over the following lines to see fixed highlights</i></p>

<p [myHighlight]="'yellow'">Highlighted in yellow   only highlightColor</p> 
<p myHighlight="orange">Highlighted in orange     only highlightColor</p>


<!--组件css-->
<h1>lolol</h1>


<h3> deep h3 italic</h3>
</ion-content>
